<template>
	<view class="conter">
		<uni-nav-bar :fixed="true" shadow :background-color="navClor" status-bar title="中医数字" :border="false" :shadow="false" left-icon="left" @clickLeft="back"/>
		<view class="ming">
			<image class='tx' src="../../static/txiang.png"></image>
			<view class="ming_right">
				<view class="ming_right_title">
					<view>苏佳闻</view>
					<image src="../../static/hg.png" mode=""></image>
				</view>
				<view class="ming_right_ry">
					<view>中国当代名医创始人</view>
					<view>央视数字频道主持人</view>
				</view>
				
			</view>
		</view>
		<view class="conter_box">
			<view class="jiqu">
				<view class="jqr_left">
					<image src="../../static/jqr.png" mode=""></image>
				</view>
				<view class="jqr_right" v-text="jiqirenTxt">
					
				</view>
			</view>
			<view class="wenti">
				<view class="wenti_title">
					<view class="wenti_title_left">
						试试看这么问我
					</view>
					<view class="wenti_title_right">
						<div class="title_right_box">
							<image src="../../static/shuaxin.png" mode=""></image>
							<view class="sx_text">
								换一换
							</view>
						</div>
						
					</view>
				</view>
				<view class="wenti_box">
					<view class="wenti_txt" v-for="item,index in wenti" :key="index" v-text="item"></view>
				</view>
		
			</view>
		</view>
		<view class="input_box">
			<input class="uni-input" focus placeholder="请输入" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"中医数字",
				jiqirenTxt:'您好，我是您的专属数字人推荐官林墨，很高兴为您服务，请告诉我您的问题或需求，我将尽力为您解决~',
				wenti:["数字人可以用多种语言进行交流吗？","数字人可以用多种语言进行交流吗？","数字人可以用多种语言进行交流吗？","数字人可以用多种语言进行交流吗？"],
				navClor: "rgba(255, 255, 255, 0)"
			}
		},
		methods: {
			back:function(){
				uni.navigateBack(-1)
			}
		},
		onPageScroll: function(e) {
			if (e.scrollTop > 1) {
				this.navClor = 'rgba(255, 255, 255, 1)'
			}else{
				this.navClor = 'rgba(255, 255, 255, 0)'
			}
		}
	}
</script>

<style lang="scss">
.conter{
	background-image: url("https://a1.qpic.cn/psc?/V12obLfG48bPoN/TmEUgtj9EK6.7V8ajmQrELQEdpWFggBvaieRar6Xa4DOxEGpaDeohRAvM62gkDhnick*qTVD1iFmL*K8cKoBr5bs5fwtKHgPAHDPQAlb5ig!/b&ek=1&kp=1&pt=0&bo=0ALgBdAC4AUDJwI!&tl=1&vuin=2664244587&tm=1734156000&dis_t=1734158548&dis_k=970bc0677d7ee2e1f4977efe3086caec&sce=60-2-2&rf=viewer_4");
	width: 100vw;
	height: 100vh;
	// background-color: #e3faf8;
	.title{
		height: 100rpx;
		font-family: FZLTCHK;
		font-weight: bold;
		font-size: 38rpx;
		color: #101011;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.ming{
		background: #F7F9FF;
		box-shadow: 4rpx 14rpx 26rpx 4rpx rgba(127,192,176,0.21), -5rpx 14rpx 26rpx 4rpx rgba(127,192,176,0.11);
		border-radius: 27rpx 23rpx 23rpx 23rpx;
		height: 258rpx;
		padding:  60rpx 50rpx;
		margin: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 70rpx;
		.tx{
			width: 241rpx;
			height: 258rpx;
			background: linear-gradient(0deg, #4FACFE 0%, #00F2FE 100%);
			border-radius: 25rpx;
			border: 0px solid #93F2D5;
		}
		.ming_right{
			height: 100%;
			display: flex;
			flex-wrap: wrap;
			width: calc(100% - 314rpx);
			.ming_right_title{
				width: 100%;
				height: 60rpx;
				font-family: AlibabaPuHuiTiB;
				font-weight: 400;
				font-size: 48rpx;
				color: #101011;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				gap: 18rpx;
				>image{
					width: 42rpx;
					height: 43rpx;
				}
			}
			.ming_right_ry{
				width: 100%;
				>view{
					font-family: AlibabaPuHuiTiR;
					font-weight: 400;
					font-size: 27rpx;
					color: #101011;
					line-height: 43rpx;
				}
				
			}
			.ming_right_img{
				width: 100%;
				.ming_right_address{
					font-family: AlibabaPuHuiTiR;
					font-weight: 400;
					font-size: 23rpx;
					color: #101011;
					line-height: 37rpx;
					opacity: 0.65;
					display: flex;
					align-items: center;
					gap: 6rpx;
					>image{
						width: 26rpx;
						height: 26rpx;
					}
				}
			}
		
		}
	}
	.conter_box{
		display: flex;
		flex-wrap: wrap;
		gap: 6rpx;
		.jiqu{
			width: 100%;
			height: 240rpx;
			display: flex;
			padding: 0 30rpx;
			justify-content: space-between;
			.jqr_left{
				>image{
					height: 115rpx;
					width: 115rpx;
				}
			}
			.jqr_right{
				width: calc(100% - 125rpx);
				background: #F7F9FF;
				box-shadow: 4rpx 14rpx 26rpx 4rpx rgba(127,192,176,0.36);
				border-radius: 14rpx;
				font-family: SourceHanSansCN;
				font-weight: 400;
				font-size: 33rpx;
				color: #555A65;
				line-height: 44rpx;
				padding: 40rpx;
			}
		}
		.wenti{
			width: calc(100% - 60rpx);
			margin: 50rpx 30rpx 0 ;
			height: 347rpx;
			background: #F7F9FF;
			box-shadow: 10rpx 11rpx 26rpx 4rpx rgba(127,192,176,0.34);
			border-radius: 16rpx;
			.wenti_title{
				width: 100%;
				height: 78rpx;
				display: flex;
				.wenti_title_left{
					width: 50%;
					height: 78rpx;
					background: #00C9D4;
					border-radius: 16rpx 0 50% 0 ;
					font-family: AlibabaPuHuiTiB;
					font-weight: 400;
					font-size: 38rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 78rpx;
				
				}
				.wenti_title_right{
					height: 78rpx;
					display: flex;
					justify-content: flex-end;
					width: 50%;
					.title_right_box{
						display: flex;
						align-items: center;
						gap: 10rpx;
						padding-right: 30rpx;
						>image{
							width: 21rpx;
							height: 21rpx;
						}
						.sx_text{
							font-family: AlibabaPuHuiTiM;
							font-weight: 400;
							font-size: 26rpx;
							color: #00B6CE;
						}
						
					}
				}
			}
			.wenti_box{
				width: 100%;
				padding: 40rpx;
				.wenti_txt{
					font-family: SourceHanSansCN;
					font-weight: 400;
					font-size: 29rpx;
					color: #555A65;
					line-height: 47rpx;
				}
			}
	
		}
	}
	.input_box{
		width: 100%;
		padding: 0 30rpx;
		position: absolute;
		bottom: 0;
		width: calc(100% - 60rpx);
		height: 120rpx;
		>input{
			padding: 0 30rpx;
			height: 78rpx;
			background: #FFFFFF;
			box-shadow: -10rpx -11rpx 26rpx 4rpx rgba(127,192,176,0.29);
			border-radius: 39rpx;
		}
	}
}
</style>
